<template>
  <div>
    <!-- <div class="title">车源信息</div>
    <div class="content" style="height: 150px">
      <ul>
        <li><b> 品牌车系:</b>&nbsp;{{ userInfo.id }}</li>
        <li><b> 所在城市:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
        <li>
          <b> 车辆是否有抵押:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
        </li>
        <b />
        <li><b> 车况是否有以下情况:</b>&nbsp;{{ userInfo.id }}</li>
      </ul>
      <ul>
        <li><b> 车身颜色:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
        <li>
          <b> 车辆注册日期:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
        </li>
        <li><b> 过户:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}</li>
        <li class="mysplit">
          1、行驶里程修过过公里数<br>
          2、车辆被水泡并进入驾驶室<br>
          3、车辆部分区域发生过灼伤<br>
          4、安全气囊因事故弹出 <br>
          5、A、B、C柱及车辆主体框架大面积修复<br>
          6、车辆发动机/变速箱因事故更换或维修<br>
        </li>
        <b />
      </ul>
      <ul>
        <li><b> 上牌城市:</b>&nbsp;{{ userInfo.username || "暂无" }}</li>
        <li>
          <b> 使用性质:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
        </li>
        <li>
          <b> 行驶里程:</b>&nbsp;{{ userInfo.mobileLocation || "暂无" }}
        </li>
      </ul>
    </div> -->
    <el-collapse v-model="activeNames4" @change="handleChange">
      <el-collapse-item title="车源信息" name="0">
        <template slot="title">
          <b class="mybig"> 车源信息</b>

          <span class="right-info">审核中</span>
        </template>
        <div class="content clearfix">
          <ul>
            <li><b>用户ID</b></li>
            <li><b>车源ID</b></li>
          </ul>
          <ul>
            <li><b>创建车源时间</b></li>
            <li><b>支持交易类型</b></li>
          </ul>
          <ul>
            <li><b>提交时间</b></li>

          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item title="交车设置" name="4">
        <template slot="title">
          <b class="mybig"> 交车设置</b>
          <span class="right-info">未完成</span>
        </template>
        <div class="content">
          <ul>
            <li><b>价格</b> 发布价格 </li>
          </ul>
          <ul>
            <li><b>交强险到期时间</b></li>
            <li><b>最快交车时间</b></li>
            <li><b>交车人</b></li>
          </ul>
          <ul>
            <li><b>手机号</b></li>
            <li><b>选择地区：</b></li>
            <li><b>详细地址</b></li>
          </ul>
        </div>
      </el-collapse-item>

      <el-collapse-item title="人车认证" name="1">
        <template slot="title">
          <b class="mybig"> 人车认证</b>

          <span class="right-info">待付款</span>
        </template>
        <div class="title" style="font-size: 17px">车辆行驶证</div>
        <div class="content clearfix">
          <div v-for="item in 3" :key="item" class="imgbox">
            <div class="desc">行驶证主页</div>
            <img src="">
          </div>
          <ul>
            <li>号牌号码：XXXX</li>
            <li>号牌号码：XXXX</li>
            <li>号牌号码：XXXX</li>
          </ul>
          <ul>
            <li>号牌号码：XXXX</li>
            <li>号牌号码：XXXX</li>
            <li>号牌号码：XXXX</li>
          </ul>
        </div>
        <div class="title" style="font-size: 17px">机动车登记证书</div>
        <div class="content clearfix">
          <div v-for="item in 3" :key="item" class="imgbox">
            <div class="desc">证书1、2页</div>
            <img src="">
          </div>
        </div>
      <!-- <div class="title" style="font-size: 17px">交强险保单</div>
          <div class="content clearfix">
            <div v-for="item in 3" :key="item" class="imgbox" @click="preview('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')">
              <div class="desc">交强险保单正面</div>
              <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
            </div>
          </div>
          <div class="title" style="font-size: 17px">车辆铭牌</div>
          <div class="content clearfix">
            <div v-for="item in 3" :key="item" class="imgbox">
              <div class="desc">交强险保单正面</div>
              <img src="">
            </div>
          </div> -->
      </el-collapse-item>
      <el-collapse-item title="车辆照片视频" name="2">
        <template slot="title">
          <b class="mybig"> 车辆照片视频</b>

          <span class="right-info">待付款</span>
        </template>
        <div class="title" style="font-size: 17px">车身外观</div>
        <div class="content clearfix">
          <div v-for="item in 14" :key="item" class="imgbox">
            <div class="desc">车辆左前45度角</div>
            <img src="">
          </div>
        </div>
        <div class="title" style="font-size: 17px">中控内饰</div>
        <div class="content clearfix">
          <div v-for="item in 10" :key="item" class="imgbox">
            <div class="desc">中控台</div>
            <img src="">
          </div>
        </div>
        <div class="title" style="font-size: 17px">机舱底盘</div>
        <div class="content clearfix">
          <div v-for="item in 14" :key="item" class="imgbox">
            <div class="desc">后备胎底板</div>
            <img src="">
          </div>
        </div>
        <div class="title" style="font-size: 17px">车辆视频</div>
        <div class="content clearfix">
          <div class="imgbox">
            <div class="desc">车辆视频</div>
            <video src="" />
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="车况描述" name="3">
        <template slot="title">
          <b class="mybig"> 车况描述</b>
          <span class="right-info">未完成</span>
        </template>
        <div class="content">
          <ul>
            <li><b>动力状况:</b></li>
            <li><b>功能状况:</b></li>
            <li><b>外观状况:</b></li>
          </ul>
          <ul>
            <li><b>车辆内饰</b></li>
            <li><b>事故等级</b></li>
          </ul>
          <ul>
            <li><b>车况介绍</b></li>
          </ul>
        </div>
      </el-collapse-item>

      <el-collapse-item title="车况承诺书" name="5">
        <template slot="title">
          <b class="mybig"> 车况承诺书</b>
          <span class="right-info">未同意</span>
        </template>
        <div class="content">
          <ul>
            <li><b>车况承诺书</b> <span style="color:blue">前往查看</span></li>
          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item title="加V优推" name="5">
        <template slot="title">
          <b class="mybig"> 加V优推</b>
          <span class="right-info">未支付</span>
        </template>
        <div class="content">
          <ul>
            <li><b>维保记录查询</b></li>
            <li><b>出险记录查询</b></li>
            <li><b>支付金额：0.00元</b></li>
            <li><b>用车记录：前往查看</b></li>
          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item title="发布预览" name="6">
        <template slot="title">
          <b class="mybig"> 发布预览</b>
          <span class="right-info">未上架</span>
        </template>
        <div class="content">
          <ul>
            <li><b>车辆详情</b> <span style="color:blue">前往查看</span></li>
          </ul>
        </div>
      </el-collapse-item>
      <el-collapse-item title="订单详情" name="7">
        <template slot="title">
          <b class="mybig"> 订单详情</b>
        <!-- <span class="right-info">未上架</span> -->
        </template>
        <div class="content">
          <ul>
            <li><b>订单编号</b> <span style="color:blue">前往查看</span></li>
            <li><b>买家下单时间</b> <span style="color:blue">前往查看</span></li>
          </ul>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames4: ['1'],
      userInfo: {}
    }
  },
  methods: {
    handleChange() {
      console.log(55)
    }
  }

}
</script>

<style scoped lang="scss">
.content>ul{
  display: flex;
  padding: 20px 20px;

}
.content>ul>li{
  width: 50%;
}
.imgbox {
  // display: flex;
  float: left;
  text-align: center;
  margin-left: 20px;
  .desc {
    font-size: 12px;
  }
  img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
  }
}
.mysplit {
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: left;
}
.mybig {
  font-size: 20px;
  margin-left: -13px;
}
.myContent {
  display: flex;
  margin-left: 30px;
  label {
    margin-right: 40px;
  }
  .tips {
    width: 100px;
    display: inline-block;
  }
}
p label {
  margin-left: 30px;
  margin-right: 50px;
}
/deep/ .el-image {
  overflow: inherit;
}
.el-collapse-item {
  position: relative;
  .right-info {
    position: absolute;
    right: 40px;
    top: 0px;
  }
}
/deep/ .el-collapse-item__header {
  padding-left: 40px;
}
.realContent {
  padding-left: 40px;
}
.topTips {
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #ccc;
}
ul li {
  list-style: none;
}
.container {
  background: #fff;
  border: 1px solid #dfe6ec;
  margin: 20px;
  margin-bottom: 100px;
  /* padding-left: 20px; */
}

.container .title {
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 20px; */
  text-indent: 2rem;
  padding: 10px 0;
  border-bottom: 1px solid #dfe6ec;
}

.container .content {
  border-bottom: 1px solid #dfe6ec;
  position: relative;
}

.container .content ul {
  display: flex;
  text-indent: 2rem;
  padding: 10px 0;
}

.container .content ul li {
  width: 400px;
}
.container .content .item p {
  font-size: 15px;
  text-align: center;
  width: 238px;
}

.container .content .img {
  width: 150px;
  height: 120px;
  /* background: #ccc; */
  margin-right: 20px;
}

.container .content .img img {
  width: 100%;
  height: 100%;
}

// .container .content .item p {
//   font-size: 15px;
//   text-align: center;
//   width: 181px;
// }

.content .QrcodeImg {
  width: 80px;
  height: 80px;
  margin: 8px auto;
  border: 1px solid #ccc;
}

.content .QrcodeImg img {
  width: 100%;
  height: 100%;
}

.content .inviteQrcode {
  text-align: center;
  width: 200px;
  height: 114px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.mytable .title {
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
}
.mytable .title .more {
  font-size: 15px;
  font-weight: normal;
  color: #ccc;
  margin-right: 20px;
  cursor: pointer;
}
.mytable .title #total {
  color: #000;
  margin-left: 20px;
}
.realTitle {
  // border-bottom: 1px solid #ccc;
  font-weight: 600;
}
</style>

